<template>
    <div>
        <list title="联系人列表"/>
       <div class="lists">
            <van-address-list
            v-model="chosenAddressId"
            :list="contacts"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @select="choseContact"
        />
    </div>
       </div>
</template>

<script>
import list from '@views/Home/component/ItemListHead'
import { mapState } from 'vuex'
import { Notify } from 'vant'

export default {
  data () {
    return {
      chosenAddressId: -1
    }
  },
  created () {
    this.initchoseId()
  },
  methods: {
    choseContact (contact) {
      this.$store.commit('order/set_order_contact', contact)
      this.$router.replace('/oder')
    },
    initchoseId () {
      if (!this.contacts.length) {
        Notify('暂无联系人')
        return
      }
      const dc = this.contacts.find(el => el.isDefault)
      if (dc) {
        this.chosenAddressId = dc.id
      } else {
        this.chosenAddressId = this.contacts[0].id
      }
    },
    onAdd () {
      this.$router.push('./contacEsit')
    },
    onEdit (contact, index) {
      this.$router.push({
        path: '/ContacAdd',
        query: {
          index
        }
      })
    }
  },
  components: {
    list
  },
  computed: {
    ...mapState({
      contacts: state => state.contact.contacts
    })
  }
}
</script>

<style >
.lists{
    margin-top: 46px;
}
</style>
